<template>
    <div class=''>

        <el-dialog title="搜索添加好友" :visible.sync="$store.state.friendVisible" width="30%">
            <div style="display: flex;">
                <el-input placeholder="请输入用户名" v-model="username" clearable>
                </el-input>
                <el-button type="primary" @click="handleSearch">搜 索</el-button>
            </div>

            <div style="margin-top: 10px;display: grid; grid-template-columns: 1fr 1fr;gap: 10px;">
                <div style="border: 1px solid #adabab;padding: 10px 5px;position: relative;border-radius: 5px;"
                    v-for="(user, index) in users" :key="index">
                    <div style="display: flex;align-items: center;">
                        <el-avatar :size="45" :src="user.avatar">
                        </el-avatar>
                        <div style="margin-left: 5px;">
                            {{ user.nickname }}
                        </div>
                    </div>
                    <span @click="handleApply(user.id)"
                        style="text-align: right;background-color: rgb(48, 123, 250);padding: 3px;color: #fff;border-radius: 5px;position: absolute;right: 5px;bottom: 5px;">
                        发送请求
                    </span>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="$store.state.friendVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
   
<script>
import { search } from '@/api/user'
import { postApply } from '@/api/apply'
export default {
    name: '',
    data() {
        return {
            username: "",
            users: []
        }
    },
    created() {
    },
    methods: {
        handleSearch() {
            search({ username: this.username }).then(res => {
                this.users = res.data
            })
        },
        handleApply(receiverId) {
            let apply = {
                sendId: this.$store.state.user.id,
                receiverId: receiverId
            }
            postApply(apply).then(res => {
                this.$message.success('发送成功')
            }).catch(error => {
                this.$message.error(error.message)
            })
        },
    }
}
</script>
   
<style scoped></style>